<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS轮播</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
		text-decoration:none;
		border:none;
	}
	.content{
		margin:100px auto;
		width:600px;
		height:500px;
	}
	.view-content{
		position: relative;
		width:650px;
		height:400px;
		overflow: hidden;
	}
	.picContent{
		width:4550px;
		position: absolute;
		height:400px;
		left:0;
	}
	.pic{
		width:650px;
		height:400px;
		float:left;
	}
</style>
<body>

<div class="content">
	<div class="view-content">
		<div class="picContent">
			<img class="pic" src="src/img/1.jpg"/>
			<img class="pic" src="src/img/2.jpg"/>
			<img class="pic" src="src/img/3.jpg"/>
			<img class="pic" src="src/img/4.jpg"/>
			<img class="pic" src="src/img/5.jpg"/>
			<img class="pic" src="src/img/6.jpg"/>
			<img class="pic" src="src/img/7.jpg"/>
		</div>
	</div>
	<div class="control">
		<button class="button" id="next">下一张</button>
	</div>
</div>
<script>
	var picContent = document.getElementsByClassName("picContent")[0];
	var button = document.getElementById("next");
	var left = null;
	var nexLeft = null;
	//var left = window.getComputedStyle(picContent,"height");
	var click = button.addEventListener('click',function(){
		left = getStyle(picContent,"left");
		//alert(left);
		left = parseInt(left);
		//alert(left);
		nexLeft = left - 650;
		//alert(nexLeft);
		if(nexLeft <= -4550){
			left = 0;
		}
		var timer = setInterval(function(){
			left = left - 10;
			if(left <= -4550){
				left = 0;
			}
			picContent.style.left = left + "px";
			if(picContent.style.left == nexLeft + "px"){
				clearInterval(timer);
			}

		},5);
		//picContent.style.left = nexLeft + "px";
	});

	function getStyle(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		}
		else {
			return getComputedStyle(obj, false)[attr];
		}
	}

</script>
</body>
</html>